<template>
  <view class="dashboard-container">
    <!-- 顶部标题栏 -->
    <view class="dashboard-header">
      <view class="header-left">
        <text class="title">测线流速监测系统</text>
        <text class="subtitle">实时流速分析与可视化</text>
      </view>
      <view class="time-display">{{ currentTime }}</view>
      <button class="back-btn" @click="goBack">返回上级</button>
    </view>

    <!-- 主内容区 -->
    <view class="main-content">
      <!-- 左侧数据面板 -->
      <view class="left-panel">
        <view class="data-card velocity-card">
          <view class="card-header">
            <text class="card-title">流速数据</text>
            <view class="card-actions">
              <text class="refresh-text" @click="remeasure">刷新数据</text>
              <view class="refresh-icon" @click="remeasure">↻</view>
            </view>
          </view>
          <view class="data-grid">
            <view class="data-item">
              <view class="data-label">有效流速</view>
              <view class="data-value">{{ effectiveVelocity }}<text class="unit">m/s</text></view>
              <view class="data-trend" :class="{'up': velocityTrend === 'up', 'down': velocityTrend === 'down'}">
                {{ velocityTrend === 'up' ? '↑' : '↓' }} {{ velocityChange }}%
              </view>
            </view>
            <view class="data-item">
              <view class="data-label">瞬时流速</view>
              <view class="data-value">{{ instantaneousVelocity }}<text class="unit">m/s</text></view>
              <view class="data-trend" :class="{'up': instantTrend === 'up', 'down': instantTrend === 'down'}">
                {{ instantTrend === 'up' ? '↑' : '↓' }} {{ instantChange }}%
              </view>
            </view>
            <view class="data-item">
              <view class="data-label">均匀度</view>
              <view class="data-value">{{ uniformity }}<text class="unit">%</text></view>
              <view class="progress-bar">
                <view class="progress-fill" :style="{width: uniformity + '%'}"></view>
              </view>
            </view>
            <view class="data-item">
              <view class="data-label">最大流速</view>
              <view class="data-value highlight">{{ maxVelocity }}<text class="unit">m/s</text></view>
              <view class="data-location">{{ maxLocation }}</view>
            </view>
            <view class="data-item">
              <view class="data-label">最小流速</view>
              <view class="data-value highlight">{{ minVelocity }}<text class="unit">m/s</text></view>
              <view class="data-location">{{ minLocation }}</view>
            </view>
          </view>
        </view>

        <view class="data-card uniformity-card">
          <view class="card-header">
            <text class="card-title">均匀度分析</text>
            <view class="legend">
              <view class="legend-item"><view class="color-block good"></view>优良(≥85%)</view>
              <view class="legend-item"><view class="color-block normal"></view>一般(70-85%)</view>
              <view class="legend-item"><view class="color-block poor"></view>较差(<70%)</view>
            </view>
          </view>
          <view class="uniformity-grid">
            <view 
              v-for="(line, index) in measurementLines" 
              :key="index" 
              class="uniformity-item"
              :class="getUniformityClass(line.uniformity)"
              @click="selectLine(index)"
              :style="{height: line.uniformity + '%'}"
            >
              <view class="uniformity-value">{{ line.uniformity }}%</view>
              <view class="line-coordinate">{{ line.coordinate }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 中间图表区 -->
      <view class="center-panel">
        <view class="chart-card">
          <view class="chart-header">
            <text class="chart-title">测线流速对比</text>
            <view class="chart-actions">
              <text class="action-btn" :class="{active: chartType === 'bar'}" @click="chartType = 'bar'">柱状图</text>
              <text class="action-btn" :class="{active: chartType === 'line'}" @click="chartType = 'line'">折线图</text>
            </view>
          </view>
          <view class="chart-container">
            <canvas 
              canvas-id="velocityChart" 
              class="velocity-chart"
              @touchstart="touchStart"
              @touchmove="touchMove"
              @touchend="touchEnd"
            ></canvas>
          </view>
          <view class="chart-footer">
            <view class="scroll-indicator" :style="{left: scrollPosition + 'px'}"></view>
          </view>
        </view>
      </view>

      <!-- 右侧数据表格 -->
      <view class="right-panel">
        <view class="data-card table-card">
          <view class="card-header">
            <text class="card-title">测线数据详情</text>
            <view class="search-box">
              <input class="search-input" placeholder="搜索测线..." v-model="searchText" />
              <view class="search-icon">🔍</view>
            </view>
          </view>
          <view class="table-container">
            <view class="table-header">
              <text class="header-cell" @click="sortBy('coordinate')">坐标{{ sortConfig.column === 'coordinate' ? (sortConfig.direction === 'asc' ? '↑' : '↓') : '' }}</text>
              <text class="header-cell" @click="sortBy('uniformity')">均匀度{{ sortConfig.column === 'uniformity' ? (sortConfig.direction === 'asc' ? '↑' : '↓') : '' }}</text>
              <text class="header-cell" @click="sortBy('coefficient')">系数{{ sortConfig.column === 'coefficient' ? (sortConfig.direction === 'asc' ? '↑' : '↓') : '' }}</text>
              <text class="header-cell" @click="sortBy('effectiveVelocity')">流速{{ sortConfig.column === 'effectiveVelocity' ? (sortConfig.direction === 'asc' ? '↑' : '↓') : '' }}</text>
            </view>
            <scroll-view class="table-body" scroll-y>
              <view 
                class="table-row" 
                v-for="(line, index) in filteredLines" 
                :key="index"
                :class="{selected: selectedLineIndex === index}"
                @click="selectLine(index)"
              >
                <text class="table-cell">{{ line.coordinate }}</text>
                <text class="table-cell" :class="getUniformityClass(line.uniformity)">{{ line.uniformity }}%</text>
                <text class="table-cell">{{ line.coefficient.toFixed(2) }}</text>
                <text class="table-cell">{{ line.effectiveVelocity.toFixed(2) }}<text class="unit">m/s</text></text>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部状态栏 -->
    <view class="status-bar">
      <text class="status-item">系统状态: <text class="status-value normal">运行正常</text></text>
      <text class="status-item">最后更新: {{ lastUpdateTime }}</text>
      <text class="status-item">测线总数: {{ measurementLines.length }}</text>
      <text class="status-item">平均流速: {{ averageVelocity.toFixed(2) }} m/s</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTime: this.getCurrentTime(),
      lastUpdateTime: this.getCurrentTime(),
      effectiveVelocity: 1.25,
      instantaneousVelocity: 1.32,
      uniformity: 85,
      maxVelocity: 1.45,
      minVelocity: 0.98,
      maxLocation: "A3(20,20)",
      minLocation: "A5(30,20)",
      velocityTrend: "up",
      velocityChange: 2.4,
      instantTrend: "down",
      instantChange: 1.2,
      measurementLines: [
        { coordinate: "A1(10,20)", uniformity: 82, coefficient: 0.95, effectiveVelocity: 1.20 },
        { coordinate: "A2(15,20)", uniformity: 85, coefficient: 0.97, effectiveVelocity: 1.25 },
        { coordinate: "A3(20,20)", uniformity: 88, coefficient: 0.99, effectiveVelocity: 1.30 },
        { coordinate: "A4(25,20)", uniformity: 83, coefficient: 0.96, effectiveVelocity: 1.22 },
        { coordinate: "A5(30,20)", uniformity: 87, coefficient: 0.98, effectiveVelocity: 1.28 },
        { coordinate: "B1(10,25)", uniformity: 76, coefficient: 0.92, effectiveVelocity: 1.15 },
        { coordinate: "B2(15,25)", uniformity: 89, coefficient: 1.01, effectiveVelocity: 1.32 },
        { coordinate: "B3(20,25)", uniformity: 91, coefficient: 1.03, effectiveVelocity: 1.35 },
        { coordinate: "B4(25,25)", uniformity: 78, coefficient: 0.93, effectiveVelocity: 1.18 },
        { coordinate: "B5(30,25)", uniformity: 84, coefficient: 0.96, effectiveVelocity: 1.23 }
      ],
      chartType: "bar",
      selectedLineIndex: 2,
      searchText: "",
      sortConfig: {
        column: "effectiveVelocity",
        direction: "desc"
      },
      scrollPosition: 0,
      touchStartX: 0,
      chartWidth: 750,
      chartHeight: 400,
      chartPadding: 40,
      chartData: [],
      ctx: null,
      timer: null
    };
  },
  computed: {
    filteredLines() {
      let lines = [...this.measurementLines];
      
      // 搜索过滤
      if (this.searchText) {
        const search = this.searchText.toLowerCase();
        lines = lines.filter(line => 
          line.coordinate.toLowerCase().includes(search) ||
          line.uniformity.toString().includes(search) ||
          line.coefficient.toString().includes(search) ||
          line.effectiveVelocity.toString().includes(search)
        );
      }
      
      // 排序
      if (this.sortConfig.column) {
        lines.sort((a, b) => {
          const valA = a[this.sortConfig.column];
          const valB = b[this.sortConfig.column];
          if (valA < valB) {
            return this.sortConfig.direction === "asc" ? -1 : 1;
          }
          if (valA > valB) {
            return this.sortConfig.direction === "asc" ? 1 : -1;
          }
          return 0;
        });
      }
      
      return lines;
    },
    averageVelocity() {
      const sum = this.measurementLines.reduce((acc, line) => acc + line.effectiveVelocity, 0);
      return sum / this.measurementLines.length;
    }
  },
  mounted() {
    this.updateTime();
    this.initChart();
    this.drawChart();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    getCurrentTime() {
      const now = new Date();
      return `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
    },
    updateTime() {
      this.timer = setInterval(() => {
        this.currentTime = this.getCurrentTime();
      }, 1000);
    },
    initChart() {
      this.ctx = uni.createCanvasContext("velocityChart", this);
      this.chartWidth = uni.upx2px(700);
      this.chartHeight = uni.upx2px(400);
      this.chartData = this.measurementLines.map(line => line.effectiveVelocity);
    },
    drawChart() {
      // 清除画布
      this.ctx.clearRect(0, 0, this.chartWidth, this.chartHeight);
      
      // 绘制背景
      this.drawChartBackground();
      
      // 绘制数据
      if (this.chartType === "bar") {
        this.drawBarChart();
      } else {
        this.drawLineChart();
      }
      
      // 绘制坐标轴和标签
      this.drawAxesAndLabels();
      
      // 绘制选中状态
      this.drawSelection();
      
      this.ctx.draw();
    },
    drawChartBackground() {
      // 绘制背景网格
      this.ctx.setStrokeStyle("#2a3a4a");
      this.ctx.setLineWidth(1);
      
      // 水平网格线
      const yStep = (this.chartHeight - this.chartPadding * 2) / 5;
      for (let i = 0; i <= 5; i++) {
        const y = this.chartHeight - this.chartPadding - i * yStep;
        this.ctx.beginPath();
        this.ctx.moveTo(this.chartPadding, y);
        this.ctx.lineTo(this.chartWidth - this.chartPadding, y);
        this.ctx.stroke();
      }
      
      // 垂直网格线
      const xStep = (this.chartWidth - this.chartPadding * 2) / (this.chartData.length - 1);
      for (let i = 0; i < this.chartData.length; i++) {
        const x = this.chartPadding + i * xStep;
        this.ctx.beginPath();
        this.ctx.moveTo(x, this.chartPadding);
        this.ctx.lineTo(x, this.chartHeight - this.chartPadding);
        this.ctx.stroke();
      }
    },
    drawBarChart() {
      const barWidth = 30;
      const maxValue = Math.max(...this.chartData, 2);
      const yScale = (this.chartHeight - this.chartPadding * 2) / maxValue;
      const xStep = (this.chartWidth - this.chartPadding * 2) / (this.chartData.length - 1);
      
      this.chartData.forEach((value, index) => {
        const x = this.chartPadding + index * xStep - barWidth / 2;
        const height = value * yScale;
        const y = this.chartHeight - this.chartPadding - height;
        
        // 设置颜色
        const isSelected = index === this.selectedLineIndex;
        this.ctx.setFillStyle(isSelected ? "#00c1de" : "#1e88e5");
        
        // 绘制柱状图
        this.ctx.fillRect(x, y, barWidth, height);
        
        // 绘制数值标签
        this.ctx.setFontSize(12);
        this.ctx.setFillStyle("#ffffff");
        this.ctx.fillText(value.toFixed(2), x + barWidth / 2 - 15, y - 5);
      });
    },
    drawLineChart() {
      const maxValue = Math.max(...this.chartData, 2);
      const yScale = (this.chartHeight - this.chartPadding * 2) / maxValue;
      const xStep = (this.chartWidth - this.chartPadding * 2) / (this.chartData.length - 1);
      
      this.ctx.setStrokeStyle("#1e88e5");
      this.ctx.setLineWidth(3);
      this.ctx.beginPath();
      
      this.chartData.forEach((value, index) => {
        const x = this.chartPadding + index * xStep;
        const y = this.chartHeight - this.chartPadding - value * yScale;
        
        if (index === 0) {
          this.ctx.moveTo(x, y);
        } else {
          this.ctx.lineTo(x, y);
        }
        
        // 绘制数据点
        const isSelected = index === this.selectedLineIndex;
        this.ctx.setFillStyle(isSelected ? "#00c1de" : "#1e88e5");
        this.ctx.beginPath();
        this.ctx.arc(x, y, isSelected ? 6 : 4, 0, Math.PI * 2);
        this.ctx.fill();
        
        // 绘制数值标签
        this.ctx.setFontSize(12);
        this.ctx.setFillStyle("#ffffff");
        this.ctx.fillText(value.toFixed(2), x - 15, y - 10);
      });
      
      this.ctx.stroke();
    },
    drawAxesAndLabels() {
      // 绘制坐标轴
      this.ctx.setStrokeStyle("#ffffff");
      this.ctx.setLineWidth(2);
      
      // X轴
      this.ctx.beginPath();
      this.ctx.moveTo(this.chartPadding, this.chartHeight - this.chartPadding);
      this.ctx.lineTo(this.chartWidth - this.chartPadding, this.chartHeight - this.chartPadding);
      this.ctx.stroke();
      
      // Y轴
      this.ctx.beginPath();
      this.ctx.moveTo(this.chartPadding, this.chartHeight - this.chartPadding);
      this.ctx.lineTo(this.chartPadding, this.chartPadding);
      this.ctx.stroke();
      
      // X轴标签
      this.ctx.setFontSize(12);
      this.ctx.setFillStyle("#ffffff");
      const xStep = (this.chartWidth - this.chartPadding * 2) / (this.chartData.length - 1);
      this.chartData.forEach((_, index) => {
        const x = this.chartPadding + index * xStep;
        const label = this.measurementLines[index].coordinate;
        this.ctx.fillText(label, x - 20, this.chartHeight - this.chartPadding + 20);
      });
      
      // Y轴标签
      const yStep = (this.chartHeight - this.chartPadding * 2) / 5;
      for (let i = 0; i <= 5; i++) {
        const y = this.chartHeight - this.chartPadding - i * yStep;
        const value = (i * 0.4).toFixed(1);
        this.ctx.fillText(value + "m/s", this.chartPadding - 30, y + 5);
      }
    },
    drawSelection() {
      if (this.selectedLineIndex >= 0 && this.selectedLineIndex < this.chartData.length) {
        const xStep = (this.chartWidth - this.chartPadding * 2) / (this.chartData.length - 1);
        const x = this.chartPadding + this.selectedLineIndex * xStep;
        
        this.ctx.setStrokeStyle("#ff9800");
        this.ctx.setLineWidth(2);
        this.ctx.setLineDash([5, 5], 0);
        
        this.ctx.beginPath();
        this.ctx.moveTo(x, this.chartPadding);
        this.ctx.lineTo(x, this.chartHeight - this.chartPadding);
        this.ctx.stroke();
        
        this.ctx.setLineDash([], 0);
      }
    },
    touchStart(e) {
      this.touchStartX = e.touches[0].x;
    },
    touchMove(e) {
      const touchX = e.touches[0].x;
      const deltaX = touchX - this.touchStartX;
      this.scrollPosition = Math.max(0, Math.min(this.chartWidth - 50, this.scrollPosition + deltaX));
      this.touchStartX = touchX;
    },
    touchEnd(e) {
      const touchX = e.changedTouches[0].x;
      const xStep = (this.chartWidth - this.chartPadding * 2) / (this.chartData.length - 1);
      const index = Math.round((touchX - this.chartPadding) / xStep);
      
      if (index >= 0 && index < this.chartData.length) {
        this.selectedLineIndex = index;
        this.updateSelectedData();
        this.drawChart();
      }
    },
    selectLine(index) {
      this.selectedLineIndex = index;
      this.updateSelectedData();
      this.drawChart();
      
      // 更新滚动位置
      const xStep = (this.chartWidth - this.chartPadding * 2) / (this.chartData.length - 1);
      this.scrollPosition = this.chartPadding + index * xStep - 25;
    },
    updateSelectedData() {
      const selectedLine = this.measurementLines[this.selectedLineIndex];
      this.effectiveVelocity = selectedLine.effectiveVelocity.toFixed(2);
      this.uniformity = selectedLine.uniformity;
      
      // 模拟瞬时流速变化
      const change = (Math.random() - 0.5) * 0.2;
      this.instantaneousVelocity = (parseFloat(this.effectiveVelocity) + change).toFixed(2);
      
      this.lastUpdateTime = this.getCurrentTime();
    },
    remeasure() {
      // 模拟数据更新
      this.measurementLines.forEach(line => {
        line.effectiveVelocity = parseFloat((1 + Math.random() * 0.5).toFixed(2));
        line.uniformity = Math.floor(75 + Math.random() * 20);
        line.coefficient = parseFloat((0.9 + Math.random() * 0.2).toFixed(2));
      });
      
      // 更新图表数据
      this.chartData = this.measurementLines.map(line => line.effectiveVelocity);
      
      // 重新计算最大最小值
      this.updateMaxMinValues();
      
      // 重新绘制图表
      this.drawChart();
      
      this.lastUpdateTime = this.getCurrentTime();
      
      uni.showToast({
        title: '数据已刷新',
        icon: 'success'
      });
    },
    updateMaxMinValues() {
      let max = -Infinity;
      let min = Infinity;
      let maxIndex = 0;
      let minIndex = 0;
      
      this.measurementLines.forEach((line, index) => {
        if (line.effectiveVelocity > max) {
          max = line.effectiveVelocity;
          maxIndex = index;
        }
        if (line.effectiveVelocity < min) {
          min = line.effectiveVelocity;
          minIndex = index;
        }
      });
      
      this.maxVelocity = max.toFixed(2);
      this.minVelocity = min.toFixed(2);
      this.maxLocation = this.measurementLines[maxIndex].coordinate;
      this.minLocation = this.measurementLines[minIndex].coordinate;
    },
    sortBy(column) {
      if (this.sortConfig.column === column) {
        this.sortConfig.direction = this.sortConfig.direction === "asc" ? "desc" : "asc";
      } else {
        this.sortConfig.column = column;
        this.sortConfig.direction = "asc";
      }
    },
    getUniformityClass(uniformity) {
      if (uniformity >= 85) return "good";
      if (uniformity >= 70) return "normal";
      return "poor";
    },
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style>
/* 全局样式 */
.dashboard-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #0f1c3c;
  color: #ffffff;
  font-family: "Arial", sans-serif;
  padding: 20rpx;
}

/* 头部样式 */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background: linear-gradient(90deg, #122048 0%, #1a3a8f 100%);
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
}

.header-left {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #ffffff;
}

.subtitle {
  font-size: 24rpx;
  color: #a0b0ff;
  margin-top: 5rpx;
}

.time-display {
  font-size: 28rpx;
  color: #ffffff;
  background-color: rgba(0, 193, 222, 0.2);
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
}

.back-btn {
  background-color: #00c1de;
  color: #ffffff;
  font-size: 26rpx;
  padding: 10rpx 25rpx;
  border-radius: 20rpx;
  border: none;
  box-shadow: 0 2rpx 10rpx rgba(0, 193, 222, 0.5);
}

/* 主内容区样式 */
.main-content {
  display: flex;
  flex: 1;
  gap: 20rpx;
}

.left-panel, .right-panel {
  width: 350rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.center-panel {
  flex: 1;
}

/* 数据卡片通用样式 */
.data-card {
  background: linear-gradient(135deg, #1a2a52 0%, #223a72 100%);
  border-radius: 12rpx;
  padding: 25rpx;
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.3);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #2a3a6a;
  padding-bottom: 15rpx;
}

.card-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #ffffff;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.refresh-text {
  font-size: 24rpx;
  color: #a0b0ff;
}

.refresh-icon {
  font-size: 28rpx;
  color: #00c1de;
  cursor: pointer;
}

/* 流速数据卡片特定样式 */
.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.data-item {
  background-color: rgba(16, 36, 82, 0.5);
  border-radius: 8rpx;
  padding: 15rpx;
  border-left: 4rpx solid #00c1de;
}

.data-label {
  font-size: 24rpx;
  color: #a0b0ff;
  margin-bottom: 10rpx;
}

.data-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
}

.data-value.highlight {
  color: #00c1de;
}

.unit {
  font-size: 22rpx;
  color: #a0b0ff;
  margin-left: 5rpx;
}

.data-trend {
  font-size: 22rpx;
  margin-top: 5rpx;
}

.data-trend.up {
  color: #4caf50;
}

.data-trend.down {
  color: #f44336;
}

.progress-bar {
  height: 6rpx;
  background-color: #2a3a6a;
  border-radius: 3rpx;
  margin-top: 10rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00c1de 0%, #1e88e5 100%);
  border-radius: 3rpx;
}

.data-location {
  font-size: 22rpx;
  color: #a0b0ff;
  margin-top: 5rpx;
}

/* 均匀度卡片特定样式 */
.uniformity-grid {
  display: flex;
  height: 300rpx;
  align-items: flex-end;
  gap: 15rpx;
}

.uniformity-item {
  flex: 1;
  background: linear-gradient(to top, #1e88e5 0%, #00c1de 100%);
  border-radius: 6rpx 6rpx 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 10rpx;
  cursor: pointer;
  transition: all 0.3s;
}

.uniformity-item.good {
  background: linear-gradient(to top, #4caf50 0%, #8bc34a 100%);
}

.uniformity-item.normal {
  background: linear-gradient(to top, #ff9800 0%, #ffc107 100%);
}

.uniformity-item.poor {
  background: linear-gradient(to top, #f44336 0%, #ff5252 100%);
}

.uniformity-item:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

.uniformity-value {
  font-size: 22rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.line-coordinate {
  font-size: 20rpx;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-top: 10rpx;
}

.legend {
  display: flex;
  gap: 15rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #a0b0ff;
}

.color-block {
  width: 16rpx;
  height: 16rpx;
  border-radius: 3rpx;
  margin-right: 5rpx;
}

.color-block.good {
  background-color: #4caf50;
}

.color-block.normal {
  background-color: #ff9800;
}

.color-block.poor {
  background-color: #f44336;
}

/* 图表卡片样式 */
.chart-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #1a2a52 0%, #223a72 100%);
  border-radius: 12rpx;
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.3);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx;
  border-bottom: 1rpx solid #2a3a6a;
}

.chart-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #ffffff;
}

.chart-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  font-size: 24rpx;
  color: #a0b0ff;
  padding: 5rpx 15rpx;
  border-radius: 15rpx;
  cursor: pointer;
}

.action-btn.active {
  background-color: #00c1de;
  color: #ffffff;
}

.chart-container {
  flex: 1;
  padding: 20rpx;
}

.velocity-chart {
  width: 100%;
  height: 100%;
}

.chart-footer {
  height: 10rpx;
  background-color: #2a3a6a;
  border-radius: 5rpx;
  margin: 0 25rpx 20rpx;
  position: relative;
}

.scroll-indicator {
  position: absolute;
  width: 50rpx;
  height: 100%;
  background-color: #00c1de;
  border-radius: 5rpx;
  transition: left 0.3s;
}

/* 表格卡片样式 */
.table-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: rgba(16, 36, 82, 0.5);
  border-radius: 20rpx;
  padding: 5rpx 15rpx;
}

.search-input {
  flex: 1;
  height: 40rpx;
  font-size: 24rpx;
  color: #ffffff;
  padding: 5rpx;
}

.search-icon {
  font-size: 26rpx;
  color: #a0b0ff;
  margin-left: 10rpx;
}

.table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.table-header {
  display: flex;
  background-color: rgba(0, 193, 222, 0.1);
  padding: 15rpx 0;
  border-bottom: 1rpx solid #2a3a6a;
}

.header-cell {
  flex: 1;
  text-align: center;
  font-size: 24rpx;
  font-weight: bold;
  color: #00c1de;
  cursor: pointer;
}

.table-body {
  flex: 1;
  overflow: hidden;
}

.table-row {
  display: flex;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #2a3a6a;
  transition: all 0.3s;
}

.table-row.selected {
  background-color: rgba(0, 193, 222, 0.2);
}

.table-row:hover {
  background-color: rgba(0, 193, 222, 0.1);
}

.table-cell {
  flex: 1;
  text-align: center;
  font-size: 24rpx;
  color: #ffffff;
}

.table-cell.good {
  color: #4caf50;
}

.table-cell.normal {
  color: #ff9800;
}

.table-cell.poor {
  color: #f44336;
}

/* 状态栏样式 */
.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 15rpx 30rpx;
  background-color: #122048;
  border-radius: 12rpx;
  margin-top: 20rpx;
}

.status-item {
  font-size: 24rpx;
  color: #a0b0ff;
}

.status-value {
  color: #ffffff;
}

.status-value.normal {
  color: #4caf50;
}
</style>